<template>
	<view>
		<!-- 搜索框 -->
		<form action="/">
			<van-search class="index-search-bar" v-model="searchVal" show-action placeholder="请输入搜索关键词" shape="round" background="#d6ece0" @search="handleSearch">
				<!-- 搜索按钮 -->
				<template #action>
					<div @click="handleSearch">搜索</div>
				</template>
			</van-search>
		</form>
		<!--  -->

		<!-- 轮播图 -->
		<van-swipe class="index-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="item in banners" :key="item.targetId"><img class="banner-img" :src="item.imageUrl" v-lazy="item.imageUrl" alt="" /></van-swipe-item>
		</van-swipe>
		
		<!-- 首页-推荐  -->
		<uni-indexRecommend></uni-indexRecommend>
		<!-- 热门播客 -->
		<uni-indexNewAlbum></uni-indexNewAlbum>
		
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'

import { showToast } from 'vant' // 弹出提示框

import { bannerApi } from '../../api/homeApi.js'	// 首页轮播图接口

// 搜索框值
let searchVal = ref('')

// 轮播图数据
let banners = ref([])

// 搜索事件
const handleSearch = () => {
	showToast(searchVal.value)
}

// 获取轮播图信息
function getBanner() {
	bannerApi().then(res => {
		banners.value = res.data.banners
		// console.log(banners.value)
		// console.log(res.data.banners);
	})
}

onMounted(() => {
	getBanner() // 轮播图
})
</script>

<style lang="scss" scoped>
@import url('index.scss');
</style>
